<template>
  <!-- 家政公司弹层 -->
  <div>
    <van-card>
      <template #tags>
        <van-row>
          <span class="top">县区</span>
        </van-row>
        <van-row type="flex" justify="space-around" style="width: 375px">
          <van-button
            class="listbutton"
            v-for="(item, index) in list"
            :key="index"
            >{{ item }}</van-button
          >
        </van-row>
        <div class="bottom" type="flex" justify="center" style="width: 375px">
          <span>展开<van-icon name="arrow-down"/></span>
        </div>
      </template>
    </van-card>

    <van-card>
      <template #tags>
        <van-row>
          <span class="top">职业类型</span>
        </van-row>
        <van-row type="flex" justify="space-around" style="width: 375px">
          <van-button
            class=" listspan"
            v-for="(item, index) in joblist"
            :key="index"
            >{{ item }}</van-button
          >
        </van-row>
        <div class="bottom" type="flex" justify="center" style="width: 375px">
          <span>展开<van-icon name="arrow-down"/></span>
        </div>
      </template>
    </van-card>

    <van-card>
      <template #tags>
        <van-row>
          <span class="top">信用等级</span>
        </van-row>
        <van-row type="flex" justify="start" style="width: 375px">
          <van-button
            class="listspan"
            style="margin-right:25px"
            v-for="(item, index) in replist"
            :key="index"
            >{{ item }}</van-button
          >
        </van-row>
      </template>
    </van-card>

    <van-card>
      <template #tags>
        <van-row>
          <span class="top">已认证客户服务数</span>
        </van-row>
        <van-row type="flex" justify="space-around" style="width: 375px">
          <van-button
            class="listspan"
            v-for="(item, index) in nulllist"
            :key="index"
            >{{ item }}</van-button
          >
        </van-row>
      </template>
    </van-card>

    <van-card>
      <template #tags>
        <van-row>
          <span class="top">职业类型</span>
        </van-row>
        <van-row type="flex" justify="space-around" style="width: 375px">
          <van-button
            class="listspan"
            v-for="(item, index) in typelist"
            :key="index"
            >{{ item }}</van-button
          >
        </van-row>
      </template>
    </van-card>

    <van-card>
      <template #tags>
        <van-button class="buntn" round type="info">清除条件</van-button>
        <van-button class="buntn" round type="info">确认筛选</van-button>
      </template>
    </van-card>
  </div>
</template>

<script>
import { json } from "@/api/json-server";
export default {
  data() {
    return {
      list: [
        "市辖区",
        "芙蓉区",
        "岳麓区",
        "天心区",
        "开福区",
        "雨花区",
        "长沙县",
        "望城县"
      ],
      joblist: [
        "全部职业",
        "月嫂",
        "育婴师",
        "保洁/清洁",
        "保姆",
        "产康师",
        "早教/托育",
        "养老/陪护"
      ],
      replist: ["AAAA级", "AAAAA级"],
      nulllist: ["大于100人", "50-100人", "30-50人", "小于30人"],
      typelist: ["500-1000人", "1000人以上", "200人以下", "200-500人"]
    };
  },
  methods: {
    json
  }
};
</script>

<style lang="scss" scoped>
.van-card {
  background-color: #fff;
}
.listbutton {
  width: 132px;
  height: 46px;
  font-size: 22px;
  color: rgba(123, 119, 119, 100);
  margin: 30px 8px;
  border-radius: 28px 28px 28px 28px;
  font-family: PingFangSC-regular;
  &:hover {
    border: 2px solid rgba(63, 81, 181, 100);
    color: rgba(63, 81, 181, 100);
  }
}
.listspan {
  width: 132px;
  height: 46px;
  font-size: 22px;
  color: rgba(123, 119, 119, 100);
  margin: 30px 8px;
  border-radius: 28px 28px 28px 28px;
  font-family: PingFangSC-regular;
  white-space: nowrap;
}
.top {
  margin-left: 23px;
  font-size: 28px;
}
.bottom {
  text-align: center;
  color: rgba(143, 142, 148, 100);
  font-size: 26px;
  font-family: PingFangSC-regular;
}
.buntn {
  width: 320px;
  height: 70px;
  font-size: 24px;
  background-color: rgba(63, 81, 181, 100);
  margin-left: 14px;
}
</style>
